<template>
    <div class="paydiv1">
        <div class="paydiv2"></div>
        <div class="paydiv3" :style="ChangeDiv5Style">
            <span class="paydiv3span1" @click="AddBankCard"
            :style="AddBankCardStyle">
            移动快捷支付</span>
            <span class="paydiv3span2" @click="EBankPay"
            :style="EBankPayStyle">
            网银支付</span>
        </div>
    </div>
</template>

<script>
    export default {
        name:'PxPTwoWaysforPayBtn',
        data(){
            return{
                AddBankCardStyle:'',
                EBankPayStyle:'',
                TwoWayChecked:99,
                ChangeDiv5Style:'',
                changediv5:{
                    'before':'border-bottom: 1px solid rgb(214, 214, 214); margin-bottom: 30px;',
                    "after":'border-bottom: 0;margin-bottom: -15px;'
                },
                changespan1:{
                    'before':'background-color: rgb(245, 245, 245);border-radius: 0px;border-top-left-radius: 5px;border-top-right-radius: 5px;border: 1px solid rgb(214, 214, 214);',
                    'after':'border-radius: 5px;border: 1px solid rgb(55, 196, 20);background-color: rgb(255, 255, 255);'
                },
                changespan2:{
                    'before':'background-color: rgb(245, 245, 245);border-radius: 0;border-top-left-radius: 5px;border-top-right-radius: 5px;border-top: 1px solid rgb(214, 214, 214);border-left: 1px solid rgb(214, 214, 214);border-right: 1px solid rgb(214, 214, 214);border-bottom: 1px solid rgb(255, 255, 255);',
                    'after':'background-color: rgb(255, 255, 255);border-radius: 5px;border: 1px dashed rgb(167, 167, 167);'
                }
            }
        },
        methods:{
            AddBankCard(){
                this.TwoWayChecked=0
                this.$bus.$emit('TwoWayChecked',this.TwoWayChecked)
                this.ChangeDiv5Style=this.changediv5.after
                this.AddBankCardStyle=this.changespan1.after
                this.EBankPayStyle=this.changespan2.after
                this.$bus.$emit('initialize','')
                this.$bus.$emit('BankChecked',99,99)
            },
            EBankPay(){
                this.TwoWayChecked=1
                this.$bus.$emit('TwoWayChecked',this.TwoWayChecked)
                this.ChangeDiv5Style=this.changediv5.before
                this.AddBankCardStyle=this.changespan1.before
                this.EBankPayStyle=this.changespan2.before
                this.EBankPayStyle='background-color: rgb(255, 255, 255);border-bottom: 1px solid rgb(255, 255, 255);'
                this.AddBankCardStyle='border-bottom: 0'
                this.$bus.$emit('WechatOrAli','')
            },
        },
    }
</script>

<style scoped>
.paydiv1{
    margin: 0 auto;
    margin-top: 20px;
    height: 100%;
}
.paydiv2{
    margin-top: 5px;
    background-color: rgb(201, 201, 201);;
    height: 6px;
    border-radius: 3px;
}
.paydiv3{
    margin-top: 35px;
    height: 34px;
    border-bottom: 1px solid rgb(214, 214, 214);
    margin-bottom: 30px;

    /* border-bottom: 0;
    margin-bottom: -15px; */
}
.paydiv3span1{
    margin-left: -1px;
    color: rgb(99, 99, 99);
    padding: 12px;
    font-size: 15px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: 1px solid rgb(255, 255, 255);
    /* 以下样式发生变化 */
    background-color: rgb(245, 245, 245);
    border-radius: 0px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid rgb(214, 214, 214);
}
.paydiv3span2{
    padding: 12px;
    margin-left: 20px;
    color: rgb(99, 99, 99);
    /* 以下样式发生变化 */
    background-color: rgb(245, 245, 245);
    border-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
     border: 1px solid rgb(214, 214, 214);
}
</style>